<template>
  <div class="search-form">
    <el-form :inline="true" :model="formValue" :label-width="labelWidth" ref="searchFormRef" :label-position="labelPosition">
      <template v-for="item in fewFormList">
        <el-form-item :key="item.label" :label="item.label + ':'" :prop="item.value">
          <el-input
            class="wid220"
            v-model="formValue[item.value]"
            :placeholder="item.placeholder"
            v-if="item.type === 'input'"
            :disabled="('disabled' in item) ? item.disabled : false"
            :clearable="('clearable' in item) ? item.clearable : true"
          ></el-input>
          <el-date-picker
            class="wid220"
            v-model="formValue[item.value]"
            type="date"
            v-if="item.type === 'date'"
            value-format="yyyy-MM-dd"
            :placeholder="item.placeholder"
            @change="search"
            :disabled="('disabled' in item) ? item.disabled : false"
            :clearable="('clearable' in item) ? item.clearable : true"
          ></el-date-picker>
          <el-date-picker
            class="time220"
            v-model="formValue[item.value]"
            v-if="item.type === 'daterange'"
            type="daterange"
            :clearable="('clearable' in item) ? item.clearable : true"
            value-format="yyyy-MM-dd"
            @change="search"
            range-separator="至"
            :disabled="('disabled' in item) ? item.disabled : false"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-select 
            class="wid220"
            filterable
            v-model="formValue[item.value]"
            :placeholder="item.placeholder"
            v-if="item.type === 'select'"
            :disabled="('disabled' in item) ? item.disabled : false"
            :clearable="('clearable' in item) ? item.clearable : true"
            @change="search">
            <el-option
              v-for="optionItem in item.options"
              :key="optionItem.value"
              :label="optionItem.label"
              :value="optionItem.value">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item class="form-btn-wrap">
        <div v-if="!bigListShow || bigFormList.length < 4">
          <el-button class="reset mg-r-6" :loading="btnLoading" type="primary" @click="search">搜索</el-button>
          <el-button type="primary" class="add-btn" @click="reset">重置</el-button>
          <slot name="button"></slot>
        </div>
      </el-form-item>
      <div class="more el-form-item" v-if="formList.length > 3" @click="changeShow">
        <span>更多</span>
        <i :class="[{ on: bigListShow }, 'el-icon-arrow-down']"></i>
      </div>
      <el-collapse-transition v-if="bigFormList.length">
        <template v-if="bigListShow">
          <div>
            <div v-for="(item, index) in bigFormList" :key="item.label">
              <div class="clearfix" v-if="index % 3 === 0"></div>
              <el-form-item :label="item.label + ':'" :prop="item.value">
                <el-input
                  v-model="formValue[item.value]"
                  :placeholder="item.placeholder"
                  :clearable="('clearable' in item) ? item.clearable : true"
                  v-if="item.type === 'input'"
                  class="wid220"
                  :disabled="('disabled' in item) ? item.disabled : false"
                ></el-input>
                <el-date-picker
                  v-model="formValue[item.value]"
                  type="date"
                  v-if="item.type === 'date'"
                  value-format="yyyy-MM-dd"
                  :placeholder="item.placeholder"
                  @change="search"
                  class="time220"
                  :clearable="('clearable' in item) ? item.clearable : true"
                  :disabled="('disabled' in item) ? item.disabled : false"
                ></el-date-picker>
                <el-date-picker
                  class="time220"
                  v-model="formValue[item.value]"
                  v-if="item.type === 'daterange'"
                  type="daterange"
                  :clearable="('clearable' in item) ? item.clearable : true"
                  value-format="yyyy-MM-dd"
                  @change="search"
                  range-separator="至"
                  :disabled="('disabled' in item) ? item.disabled : false"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
                <el-select
                  class="wid220"
                  v-model="formValue[item.value]"
                  :placeholder="item.placeholder"
                  v-if="item.type === 'select'"
                  filterable
                  :clearable="('clearable' in item) ? item.clearable : true"
                  :disabled="('disabled' in item) ? item.disabled : false"
                  @change="search">
                  <el-option
                    v-for="optionItem in item.options"
                    :key="optionItem.value"
                    :label="optionItem.label"
                    :value="optionItem.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="clearfix"></div>
            <el-form-item class="form-btn-wrap bottom-btn" label=" ">
              <el-button class="reset mg-r-6" type="primary" @click="search">搜索</el-button>
              <el-button type="primary" class="add-btn" @click="reset">重置</el-button>
              <slot name="button"></slot>
            </el-form-item>
          </div>
        </template>
      </el-collapse-transition>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'MainSearchForm',
  props: {
    formList: {
      type: Array,
      required: true
    },
    formValue: {
      type: Object,
      required: true
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    btnLoading: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      searchForm: {},
      bigListShow: false  //  是否展开
    }
  },
  computed: {
    //  小于3的搜索项
    fewFormList() {
      return this.formList.filter((item, index) => index < 3)
    },
    //  大于3的搜索项
    bigFormList() {
      return this.formList.length > 3 ? this.formList.filter((item, index) => index > 2) : []
    }
  },
  methods: {
    reset() {
      this.$refs.searchFormRef.resetFields();
      this.$emit('formReset')
    },
    search() {
      this.$emit('formSearch')
    },
    getFormRefs() {
      return this.$refs.searchFormRef
    },
    changeShow() {
      this.bigListShow = !this.bigListShow
    }
  }
}
</script>
<style lang="scss" scoped>
  .search-form {
    /deep/.el-date-editor .el-input__suffix {
      right: 24px;
    }
    /deep/.el-form-item {
      margin-bottom: 16px;
      margin-right: 0;
      &.form-btn-wrap {
        margin-bottom: 0;
        width: 240px;
        &.bottom-btn {
          margin-bottom: 16px;
          .reset {
            margin-left: 0;
          }
        }
      }
      &.more {
        margin-bottom: 0;
        color: #181818;
        font-size: 14px;
        margin-top: 8px;
        margin-left: 10px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        i {
          font-size: 16px;
          font-weight: bold;
          margin-left: 5px;
          vertical-align: -1px;

          &.on {
            transform: rotate(180deg);
          }
        }

        &:hover {
          cursor: pointer;
        }
      }
    }
    .reset {
      margin-left: 10px;
      &:hover {
        background-color: rgba(3,169,142, .8);
        border-color: rgba(3,169,142, .8);
      }
    }
    .add-btn {
      margin-left: 4px;
    }
    /deep/.el-select {
      &.wid220 {
        width: 220px;
      }
    }
    .reset {
      background-color: #03a98e;
      border-color: #03a98e;
      color: #fff;
    }
    .add-btn {
      background-color: #fff;
      border-color: #dcdfe6;
      color: #606266;
      &:hover {
        border-color: #03a98e;
        color: #03a98e;
      }
    }
  }
</style>